/* 京东主题色 */
:root {
  --jd-red: #e93b3d;
  --jd-dark-red: #c91523;
  --jd-light-red: #fef0f0;
  --jd-gray: #f7f7f7;
  --jd-dark-gray: #999;
  --jd-text: #333;
}

/* 全局样式 */
.jd-container {
  background-color: var(--jd-gray);
  min-height: 100vh;
}

/* 头部样式 */
.jd-header {
  background-color: var(--jd-red);
  color: white;
  padding: 3rem 1.25rem; /* 16px 20px */
  position: relative;
  box-shadow: 0 0.125rem 0.625rem rgba(233, 59, 61, 0.2); /* 0 2px 10px */
  height: 20rem;
  box-sizing: border-box;
}

.jd-header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 75rem; /* 1200px */
  margin: 0 auto;
}

.jd-logo-container {
  display: flex;
  align-items: center;
  gap: 0.75rem; /* 12px */
}

.jd-logo {
  width: 15rem; /* 60px */
  height: 15rem; /* 60px */
}

.jd-title {
  font-size: 6rem; /* 20px */
  font-weight: bold;
  margin: 0;
  color: white;
}

.jd-actions {
  display: flex;
  align-items: center;
}

.jd-setting-btn {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: white;
  padding: 0.5rem 1rem; /* 8px 16px */
  border-radius: 0.9375rem; /* 15px */
  font-size: 5rem; /* 14px */
  display: flex;
  align-items: center;
  gap: 0.3125rem; /* 5px */
}

/* 订单区域样式 */
.jd-order-section {
  background-color: white;
  margin: 0.9375rem; /* 15px */
  border-radius: 0.5rem; /* 8px */
  padding: 1.25rem; /* 20px */
  box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.05); /* 0 1px 3px */
  transition: all 0.3s ease;
}

.jd-order-section:hover {
  box-shadow: 0 0.125rem 0.625rem rgba(0, 0, 0, 0.1); /* 0 2px 10px */
  transform: translateY(-0.125rem); /* 2px */
}

.jd-order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.25rem; /* 20px */
}

.jd-section-title {
  font-size: 5rem; /* 18px */
  font-weight: bold;
  margin: 0;
  color: #333;
  position: relative;
  padding-left: 0.625rem; /* 10px */
}

.jd-section-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0.1875rem; /* 3px */
  background-color: #e93b3d;
  border-radius: 0.1875rem; /* 3px */
}

.jd-view-all {
  font-size: 3rem; /* 14px */
  color: #999;
  text-decoration: none;
  transition: color 0.3s ease;
}

.jd-view-all:hover {
  color: #e93b3d;
}

.jd-order-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.9375rem; /* 15px */
}

.jd-order-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem; /* 8px */
  transition: all 0.3s ease;
  padding: 0.625rem; /* 10px */
  border-radius: 0.3125rem; /* 5px */
  cursor: pointer; /* 提示可交互 */
}

.jd-order-item:hover {
  background-color: #fef0f0;
  transform: translateY(-0.125rem); /* 2px */
}

.jd-order-icon {
  width: 10rem; /* 50px */
  height: 10rem; /* 50px */
  background-color: #fef0f0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #e93b3d;
  transition: all 0.3s ease;
}

.jd-order-item:hover .jd-order-icon {
  background-color: #e93b3d;
  color: white;
}

.jd-order-text {
  font-size: 4rem; /* 14px */
  color: #333;
  transition: color 0.3s ease;
}

.jd-order-item:hover .jd-order-text {
  color: #e93b3d;
  font-weight: 500; /* 文字加粗（不改变尺寸，仅视觉强化） */
}